<template>
<!--  一级告警数量排名前5-->
  <div id="gjslpm"></div>
</template>

<script>
const echarts = require('echarts/lib/echarts')
export default {
  name: 'gjslpm',
  props: ['chart'],
  data() {
    return {
      myChart: null,
      barWidth: 6
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeFn, true);
    this.myChart?.dispose();
  },
  methods: {
    getChartData(params) {
      this.$http.get('/dataView/getScreenOneLevelAlarmTopFive', {
        params
      }).then(res => {
        this.initChart(res)
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取数据失败')
      })
    },
    initChart(val) {
      val.sort((a, b) => {
        return a.count - b.count
      })
      let chartDom = document.getElementById('gjslpm');
      if (!chartDom) {return}
      this.myChart = echarts.init(chartDom);

      let option = {
        title: {
          text: '',// 设置主标题
          left: 'left'
        },
        tooltip: {
          show: true
        },
        legend: {
          data: ['总数','已处理', '未处理'],
          top: 20,
          width: 300,
          right: 10 // 控制图例
          // left,right可以控制图例距离容器方位
          // textStyle可以控制图例文字样式
        },
        grid:{ // 让图表占满容器
          top:'2%',
          left:'2%',
          right:'8%',
          bottom:'4%',
          containLabel: true
        },
        yAxis: {
          type: 'category',
          data: val.map(item => item.local),
          axisLabel: {// y轴文字的配置
            textStyle: {
              color: '#fff',
              margin: 15
            }
          },
          axisTick: {
            show: false,
          },
          splitLine: { // 网格线
            'show': false,
          },
          axisLine:{ // y轴
            'show':false
          },
        },
        xAxis: {
          type: 'value',
          'splitLine': {
            'show': false
          }},
        series: [{
          name: '', // 对应图例数据
          type: 'bar', // 类型为"bar"柱状图
          barWidth: this.barWidth, // 柱状宽度
          showBackground: true,
          barGap: 10, // 不同系列的柱间距离
          data: val.map(item => item.count),
          label: {
            show: true,
            position: 'right',
            color: '#ffffff'
          },
          itemStyle: {
            barBorderRadius: [0,18,18,0],
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
              [
                {
                  offset: 0,
                  color: 'rgb( 81,133,255)'
                },
                {
                  offset: 0.8,
                  color: 'rgb(  81,133,255)'
                },
                {
                  offset: 1,
                  color: '#ffffff'
                }
              ]
            )
          }
        }
        ]
      };
      this.myChart.setOption(option);

      option && this.myChart.setOption(option);

      window.addEventListener('resize', this.resizeFn, true);
    },
    resizeFn() {
      this.myChart.resize();
    }
  }
}
</script>

<style lang="scss" scoped>
#gjslpm {
  width: 100%;
  height: 208px;
}
</style>
